<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>专业课成绩</title>
    <link rel="shortcut icon" href="../../image/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../../css/main.css" media="all">
    <link rel="stylesheet" href="../../css/ok/oksub.css">
    <script type="text/javascript" src="../../libs/loading/okLoading.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-container">
        <div class="layui-card" style="margin-top: 15px">
            <div class="layui-card-header"><b style="font-size: 18px">添加专业成绩</b></div>
            <div class="layui-card-body">
                <form class="layui-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label">学期</label>
                        <div class="layui-input-block">
                            <select name="semester" lay-verify="required">
                                <option value="选择学期" disabled>选择学期</option>
                                <option value="大一上学期">大一上学期</option>
                                <option value="大一下学期">大一下学期</option>
                                <option value="大二上学期">大二上学期</option>
                                <option value="大二下学期">大二下学期</option>
                                <option value="大三上学期">大三上学期</option>
                                <option value="大三下学期">大三下学期</option>
                                <option value="大四上学期">大四上学期</option>
                                <option value="大四下学期">大四下学期</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">科目</label>
                        <div class="layui-input-block">
                            <input type="text" name="subject" required lay-verify="required"
                                   placeholder="请输入专业科目"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">科目评分</label>
                        <div class="layui-input-block">
                            <select name="score" lay-verify="required">
                                <option value="科目评级" disabled>科目评级</option>
                                <option value="A">A</option>
                                <option value="B">B</option>
                                <option value="C">C</option>
                                <option value="D">D</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="formAchievement">添加</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <div class="ok-body">
            <!--模糊搜索区域-->
            <div class="layui-row">
                <form class="layui-form layui-col-md12 ok-search">
                    <select name="semester" lay-verify="required">
                        <option value="选择学期" disabled>选择学期</option>
                        <option value="大一上学期">大一上学期</option>
                        <option value="大一下学期">大一下学期</option>
                        <option value="大二上学期">大二上学期</option>
                        <option value="大二下学期">大二下学期</option>
                        <option value="大三上学期">大三上学期</option>
                        <option value="大三下学期">大三下学期</option>
                        <option value="大四上学期">大四上学期</option>
                        <option value="大四下学期">大四下学期</option>
                    </select>
                    <button class="layui-btn" lay-submit="" lay-filter="search">
                        <i class="layui-icon layui-icon-search"></i>
                    </button>
                </form>
            </div>
            <!--数据表格-->
            <table id="studentAchievement" lay-filter="achievement"></table>
        </div>

    </div>
</div>
<script src="../../libs/layui/layui.js"></script>
<script src="../../js/model.js"></script>
<script>
    layui.use(["table", "form", "okLayer", "layer", "jquery", "okUtils"], function () {
        let table = layui.table;
        let form = layui.form;
        let okLayer = layui.okLayer;
        let layer = layui.layer;
        let $ = layui.jquery;
        let okUtils = layui.okUtils;

        // 获取contentText
        const ctx = function () {
            let pathName = document.location.pathname;
            let index = pathName.substr(1).indexOf("/");
            let result = pathName.substr(0, index + 1);
            return result;
        }();
        // 获取student
        var student = JSON.parse(window.sessionStorage.getItem("student"));

        //数据渲染
        var achievemetTable = table.render({
            elem: '#studentAchievement'
            , width: 745
            , url: ctx + '/ygssecs/getAchievementsbysemester' //数据接口
            , where: {semester: "大一上学期", stuid: student.stuid}
            , page: false //开启分页
            , response: {
                statusCode: 200 //规定成功的状态码，默认：0
            }
            , cols: [[ //表头
                {field: '', title: '序号', type: 'numbers', width: 80, sort: false, fixed: 'left', align: 'center'}
                , {field: 'achieveid', title: 'id', width: 180, sort: false, hide: true, align: 'center'}
                , {field: 'semester', title: '学期', width: 180, sort: false, fixed: 'left', align: 'center'}
                , {field: 'subject', title: '科目', width: 300, align: 'center'}
                , {field: 'score', title: '评分', width: 100, sort: true, align: 'center'}
                , {title: '操作', width: 80, align: 'center', fixed: "right", templet: "#operationTpl"}
            ]], done: function () {
                okLoading.close();
            }
        });

        //添加成绩
        form.on('submit(formAchievement)', function (data) {
            var achievement = new Achievemen(null, data.field.subject, data.field.score, data.field.semester, student);
            $.ajax({
                url: ctx + '/ygssecs/addAchievement',
                type: 'post',
                data: {achievementjson: JSON.stringify(achievement)},
                dataType: 'json',
                beforeSend: function () {
                    layer.load();
                }
            }).done(function (res) {
                setTimeout(function () {
                    layer.closeAll()
                    okLayer.greenTickMsg(res.msg, function () {
                        location.reload();
                    })
                }, 500);
            }).fail(function (e) {
                console.log(e)
            })
            return false;
        })

        //数据表格重载
        form.on('submit(search)', function (data) {
            achievemetTable.reload({
                where: {semester: data.field.semester, stuid: student.stuid}
            });
            return false;
        });

        table.on("tool(achievement)", function (obj) {
            let data = obj.data;
            switch (obj.event) {
                case "edit":
                    editachievement(data);
                    break;
                case "del":
                    console.log(data.achieveid);
                    delachievement(data.achieveid);
                    break;
            }
        })

        function editachievement(data) {
            okLayer.open("更新成绩", "studentAchievement-update.html", "90%", "90%", function (layero) {
                let iframeWin = window[layero.find("iframe")[0]["name"]];
                iframeWin.initForm(data);
            }, function () {
                achievemetTable.reload();
            })
        }

        function delachievement(achieveid) {
            okLayer.confirm("确定要删除吗？", function () {
                okUtils.ajax("/ygssecs/delachievementbyid", "post", {achieveid: achieveid}, true).done(function (response) {
                    console.log(response);
                    okLayer.greenTickMsg(response.msg, function () {
                        achievemetTable.reload();
                    })
                }).fail(function (error) {
                    console.log(error)
                });
            })
        }
    });
</script>
<script id="operationTpl" type="text/html">
    <a href="javascript:" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
    <a href="javascript:" title="删除" style="margin-left: 10px;" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
</script>
</body>
</html>